{extend name="public/layout" /}
{block name="head"}
<style>
  .attachment-file-item{padding-left:120px;}
  .attachment-file-item .file-ext{width:114px;height:64px;}
  .attachment-file-item .file-ext .duration{
    //background-color: rgba(0,0,0,.3);
    text-align:center;
    color:#f4f4f4;
    position: absolute;
    bottom:25%;
    width:100%;
  }
</style>
{/block}
{block name="body"}

<body>
<div class="container-fluid p-t-15">
  <div class="row">
    <div class="col-sm-4 col-md-3 col-lg-2">
      <div class="card" id="left-menu" style="height:calc(100vh - 40px);overflow-y: auto;">
        <div class="card-header card-header-sm">
          <h4>视频分类</h4>
          <ul class="card-actions">
            <li>
              <button type="button" onclick="doAction.initTree();">
                <i class="mdi mdi-refresh"></i>
              </button>
            </li>
          </ul>
        </div>
        <div class="p-l-10 p-t-10">
          <a href="javascript:void(0)" style="color:rgb(51, 51, 51);font-size:12px;" onclick="doAction.showAll();">
            <i class="mdi mdi-view-list"></i> 全部视频
          </a>
        </div>
        <ul class="ztree" id="ztree" style="padding-bottom:20px;"></ul>
      </div>
    </div>
    <div class="col-sm-8 col-md-9 col-lg-10">
      <div class="card">
        <div class="card-header card-header-sm">
          <form id="search-form" class="form-inline">
            <input type="hidden" name="class_id" value="" />
            <div class="form-group">
              <div class="input-group">
                <span class="input-group-addon">关键词</span>
                <input type="text" name="title" class="form-control" />
              </div>
            </div>
            <div class="form-group">
              <div class="input-group">
                <span class="input-group-addon">开始时间</span>
                <input type="text" name="start_time" class="f-laydate form-control" />
              </div>
            </div>
            <div class="form-group">
              <div class="input-group">
                <span class="input-group-addon">结束时间</span>
                <input type="text" name="end_time" class="f-laydate form-control" />
              </div>
            </div>
            <button type="button" onclick="helper.refreshTable()" id="search-btn" class="btn btn-default">
              <i class="mdi mdi-magnify"></i> 搜索
            </button>
          </form>
        </div>
        <div class="p-lr-15">
          <div class="toolbar">
            <a href="javascript:void(0);" onclick="doAction.upload()" class="btn btn-primary">
              <i class="mdi mdi-video"></i> 上传视频
            </a>
          </div>
          <div class="table-responsive">
            <table id="grid" class="table"></table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/html" id="video-tpl">
  <div class="attachment-file-item">
    <a href="javascript:void(0);" class="file-ext" onclick="doAction.play('${data.FileId}')" style="background-image:url(${data.CoverUrl})">
      <div class="duration"><i class="mdi mdi-play fa-2x"></i></div>
    </a>
    <div class="file-info">
      <div class="one-cut">标题：${data.Name}</div>
      <div class="one-cut">文件ID：${data.FileId}</div>
      <div class="one-cut">文件类型：${data.Type}</div>
    </div>
  </div>
</script>

  <script>
    formHelper.init();
    helper.bootstrapTable({
      url: "index.html",
      pageSize: 20,
      pageList: [],
      sortName:'CreateTime',
      sortOrder:"desc",
      columns: [
        { field: "checkbox", checkbox: true, width:"50" },
        { field: "Name", title: "视频名称",
          formatter:function (value,row,index) {
            row.CoverURL = valid.isEmpty(row.CoverUrl) ? '/static/system/images/nopic.gif' : row.CoverUrl;
            return juicer($('#video-tpl').html(), { data: row });
          }
        },
        { field: "ClassPath", title: "视频分类", width:"220" },
        { field: "CreateTime", title: "创建时间", width:"180", sortable:true },
        { field: "operate", title: "操作", width: "160",
          formatter: function (value, row, index) {
            var html = '';
            html += '<a href="javascript:void(0);"  class="btn-xs btn btn-primary" onclick="doAction.edit(\'' + row.FileId + '\')">' +
                '<i class="mdi mdi-pencil"></i> 编辑</a> ';
            html += '<a href="javascript:void(0);"  class="btn-xs btn btn-danger" onclick="doAction.del(\'' + row.FileId + '\')">' +
                '<i class="mdi mdi-archive"></i> 删除</a> ';
            return html;
          }
        }
      ]
    });
    var doAction = {
      initTree: function () {
        Do('ztree', function () {
          $.post('/system/vod.cate/index.html', function (nodes) {
            $.fn.zTree.init($('#ztree'), {
              data: {
                view: {
                  dblClickExpand: false,
                  showLine: false
                },
                simpleData: {
                  enable: true,
                  idKey: "id",
                  pIdKey: "pid",
                  rootPId: 0
                }
              },
              callback: {
                onClick: function (event, treeId, treeNode) { //单击事件
                  $('input[name="class_id"]').val(treeNode.id);
                  helper.refreshTable();
                }
              }
            }, nodes);
            let zTree = $.fn.zTree.getZTreeObj("ztree");
            zTree.expandAll(true);
          });
        });
      },
      upload:function(){
        helper.createTab({
          title: '上传视频',
          url: '/system/vod.upload/index.html'
        });
      },
      edit: function (id) {
        console.info('/system/vod.index/edit.html?id=' + id);
        helper.createTab({
          title: '修改视频',
          url: '/system/vod.index/edit.html?id=' + id
        });
      },
      del: function (id) {
        layer.confirm("确认删除吗?", {icon: 3}, function (index) {
          helper.getAjax({
            url: "/system/vod.index/del.html",
            data: {id: id},
            success: function (res) {
              if (res.code == 1) {
                //helper.refreshTable();
                $('#grid').bootstrapTable('remove', { field: "FileId",values:[id] });
              } else {
                helper.tips(res.msg);
              }
            }
          });
          layer.close(index);
        });
      },
      showAll:function () {
        $('input[name="class_id"]').val('');
        helper.refreshTable();
      },
      play:function (id) {
        var url = '/system/vod.index/play.html?id=' + id;
        layer.open({
          type: 2,
          title: "视频播放",
          offset: "30px",
          area: helper.layerMedia('620px','440px'),
          content: url
        });
      }
    };
    doAction.initTree();
  </script>
</body>
{/block}